{{ title = application }}
{{include "layouts/header.view.html"}}

<div class="text-header bg-primary">
  <h1 class="jumbotron-heading text-center">
    {{application}}
  </h1>

  <p class="lead text-center">
    Free mtDNA Haplogroup Classification Service
  </p>
</div>

<div class="text-center" style="padding-top:40px; padding-bottom:40px">
  Upload your mtDNA profiles aligned to rCRS or RSRS and<br>receive mitochondrial haplogroups in return.
</div>

<div id="container" class="container">
  <div class="row justify-content-md-center">
    <div class="col-sm-5">
      <form action="{{routeUrl("jobs_create",{})}}" method="post" enctype="multipart/form-data" onSubmit="waitDialog()">

        <div class="form-group">
          <label for="files">Upload one or more files <small>(<30 MB)</small>:</label>
          <input type="file" id="files" name="files" multiple class="form-control" accept=".fasta,.fa,.fna,.hsd,.vcf,.gz,.txt" required>
        </div>

        <div class="form-group">
          <label for="format">
            File Format: &nbsp;
            <a href="https://haplogrep.readthedocs.io/en/latest/input-formats/" target="_blank" title="Help" class="col-form-label">
              <i class="fas fa-question-circle"></i>
            </a>
          </label>
          <select id="format" name="format" class="form-control" required>
            <option value="auto">Auto-Detect</option>
            <option disabled>----------------</option>
            <option value="hsd">hsd</option>
            <option value="vcf">VCF</option>
            <option value="fasta">FASTA</option>
          </select>
        </div>

        <div class="form-group text-left" id="vcf-options">
          <div class="form-group form-check">
            <input class="form-check-input" style="margin-left: 0px;" type="checkbox" value="true" id="chip" name="chip">
            <label class="form-check-label" for="chip">
              Uploaded data is from a genotyping array
              <a href="" target="_blank" title="Help">
                <i class="fas fa-question-circle"></i>
              </a>
            </label>
          </div>
          <div class="form-inline">
            <label for="hetLevel" class="col-form-label">
              Heteroplasmy level:
            </label>
            &nbsp;
            <input class="form-control" type="text" value="0.9" style="width: 60px; id="hetLevel" name="hetLevel" required>

            &nbsp;
            <a href="" target="_blank" title="Help" class="col-form-label">
              <i class="fas fa-question-circle"></i>
            </a>
          </div>
        </div>
        <br>

        <div class="form-group">
          <label for="phylotree">
            Choose the phylogenetic tree:
            <a href="https://haplogrep.readthedocs.io/en/latest/available-trees/" target="_blank" title="Help" class="col-form-label">
              <i class="fas fa-question-circle"></i>
            </a>
          </label>
          <select id="phylotree" name="phylotree" class="form-control" required>
            {{for category in categories}}
              <option value="" disabled>{{category}}</option>
              {{for tree in trees.getByCategory(category)}}
                <option value="{{tree.getIdWithVersion()}}">&nbsp;&nbsp;&nbsp;{{tree.name}} {{tree.version}}</option>
              {{end}}
            {{end}}
          </select>
        </div>


        <div class="form-group">
          <label for="distance">
            Distance function: &nbsp;
            <a href="https://haplogrep.readthedocs.io/en/latest/kulczynski/" target="_blank" title="Help" class="col-form-label">
              <i class="fas fa-question-circle"></i>
            </a>
          </label>
          <select id="distance" name="distance" class="form-control" required>
            {{for distance in distances}}
            <option value="{{distance}}">{{distance.getLabel()}}</option>
            {{end}}
          </select>
        </div>
          <br>

          <div class="form-group">
            <label for="">
              Output:
            </label>
            <div class="form-group form-check">
              <input class="form-check-input" style="margin-left: 0px;" type="checkbox" value="true" id="additional-output" name="additional-output">
              <label class="form-check-label" for="additional-output">
                Create additional output files (e.g. FASTA or Multiple Sequence Alignment (MSA) file)
              </label>
            </div>
          </div>

        <br>
        <button type="submit" id="submit" class="btn btn-primary btn-lg btn-upload">Upload and Classify</button>
      </form>

    </div>
  </div>
</div>

<div id="container" class="container mt-5">
  <div class="row justify-content-md-center">
    <div class="col-sm-5 text-center">

      <p><b>No dataset at hand?</b> No problem, take one of our examples:</p>

      {{for example in examples}}
      <form action="{{routeUrl("jobs_create",{})}}" method="post" enctype="multipart/form-data" style="display: inline;">
        <input type="hidden" name="dataset" value="{{example.id}}">
        <input type="hidden" name="phylotree" value="{{example.tree}}">
        <button type="submit" id="submit" class="btn btn-outline-secondary" style="margin-top: 10px">
          <i class="far fa-file-alt"></i> {{example.name}}
        </button>
      </form>
      {{end}}
    </div>
  </div>
</div>

<script>
  $('#vcf-options').hide();
  $('#format').on('change', function() {
    console.log("fdsfds");
    if ($(this).val() == 'vcf') {
      $('#vcf-options').show();
    } else {
      $('#vcf-options').hide();
    }
  });
</script>

{{include "layouts/footer.view.html"}}
